<template>
	<view class="container">
		<view class="card-section">
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-view" @scrolltoupper="upper"
				@scrolltolower="lower" @scroll="scroll">
				
				<view v-for="(card, index) in cards" :key="index" class="scroll-view-item uni-bg-green" @click="handleCardClick(card)">
					<view class="item-card">
						<view class="trip-title">{{card.plan_title}}</view>
						<view class="station-line-container">
							<image src="@/static/jiaotongguihua/train.svg" class="train-icon"></image>
							<view v-for="(station, index) in card.stations" :key="index" class="station-container">
								<text class="station-name">{{station.station}}</text>
								<view v-if="index < card.stations.length - 1" class="site-between-line"></view>
							</view>
						</view>

						<!-- 行程亮点 -->
						<view class="highlights">
							<text class="highlight-text">{{card.plan_description}}</text>
						</view>
						
						<!-- 适合人群 -->
						<view class="suitable-crowd">
							<view class="tags">
								<text class="tag">{{card.suitableCrowd}}</text>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="bottom-container">
			<view class="inputs-container">
				<uni-datetime-picker 
					type="daterange"
					v-model="dateRange"
					@change="change"
					:clearIcon="false"
					class="date-picker"
					:border="false"
					placeholder="选择出行日期">
				</uni-datetime-picker>

				<!-- <view class="date-container"> -->
					<!-- <view class="date-label">出发</view> -->
					<!-- <uni-datetime-picker 
						type="date"
						v-model="startDate"
						@change="change"
						:clearIcon="false"
						class="date-picker"
						:border="false"
						placeholder="出发日期">
					</uni-datetime-picker>
					<view class="space-20rpx"></view> -->
					<!-- <view class="date-label">返程</view> -->
					<!-- <uni-datetime-picker 
						type="date"
						v-model="endDate"
						@change="change"
						class="date-picker"
						:clearIcon="false"
						:border="false"
						placeholder="返程日期">
					</uni-datetime-picker> -->
				
				<!-- </view> -->
				<view class="range-container">
					<view class="range-label">出发地</view>
					<uni-data-picker
						v-model="departureCity"
						:localdata="cityData"
						@change="handleCityChange"
						class="city-picker"
						:clearIcon="false"
						:border="false"
						placeholder="选择城市">
					</uni-data-picker>
				</view>
			</view>
			<view class="tags-container">
				<view class="tags-label">预算</view>
				<uni-tag v-for="(tag, index) in budget" :key="index" :text="tag"
					:custom-style="selectBudgetIdx === index ? 'background-color: #c5b193; border-color: #c5b193; color: #fff; font-weight: bold; border-radius: 20rpx; margin-left: 16rpx;' : 'background-color: #f8f0e3; border-color: #f8f0e3; color: #333; border-radius: 20rpx; margin-left: 16rpx;'"
					@click="handleTagClick(index)">
				</uni-tag>
			</view>
			<!-- 输入框 -->
			<!-- <input class="input-box" v-model="userInput" :ref="textArea" @linechange="handleTextareaHeightChange"
			placeholder="输入您的其他需求..." :disabled="isLoading || isStreaming" auto-height></input> -->
			<view class="input-area">
				<button class="send-button" style="background-color: #ed8e40;color: white;" type="primary" :loading=" isRefreshing == true" @click="refreshPlanCards">{{ isRefreshing == true ? '生成中...' : '生成行程方案' }}</button>
			</view>
		</view>
	</view>
</template>

<style>
.container {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  background-color: #f8f0e3;
}

.card-section {
	width: 100%;
	/* overflow-y: auto; */
	margin-bottom: 260px;
	
}

.bottom-container {
	background-color: white;
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
  	border-top-left-radius: 1.5rem;
	border-top-right-radius: 1.5rem;
	box-shadow: 0 -4px 6px -1px rgba(100, 100, 100, 0.1);
}

.space-20rpx {
	width: 20rpx;
}

.scroll-view {
	height: 100%;
	width: 100%;
}

.scroll-view-item {
	padding: 25rpx 20rpx 0rpx 20rpx;
	display: flex;
	flex-direction: column;
	
}

.item-card {
	width: 100%;
	background-color: white;
	border-radius: 20rpx;
	box-shadow: 0 -2px 3px -1px rgba(0, 0, 0, 0.1);
}

.trip-title {
	font-size: 30rpx;
	font-weight: bold;
	padding: 40rpx 30rpx 0 30rpx;
}

.station-line-container {
	display: flex;
	flex-direction: row;
	/* justify-content: center; */
	align-items: center;
	/* background-color: #f8f0e3; */
	margin: 20rpx 30rpx 0 30rpx;
}

.train-icon {
	width: 50rpx;
	height: 40rpx;
	margin-right: 14rpx;
}

.site-between-line {
	height: 2rpx;
	width: 30rpx;
	background-color: #c5b193;
}

.station-container {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.station-name {
	font-size: 26rpx;
	font-weight: bold;
	color: #fff;
	background-color: #c5b193;
	border-radius: 40rpx;
	padding: 6rpx 20rpx;
}

.highlights {
	margin: 20rpx 30rpx 0 30rpx;
	width: calc(100% - 60rpx);
}
.highlight-text {
	font-size: 26rpx;
	color: #777;
}
.suitable-crowd {
	margin: 20rpx 30rpx 0 30rpx;
	margin-bottom: 40rpx;
	width: calc(100% - 60rpx);
}
.tags {
	display: flex;	
}
.tag {
	background-color: #f8f0e3;
	font-size: 12px;
	color: #333;
	padding: 5px 10px;
	border-radius: 20rpx;
	margin-right: 10rpx;
}
.inputs-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 40rpx 40rpx 0 40rpx;
	border-radius: 30rpx;
}
.date-container {
	display: flex;
	flex-direction: row;
	align-items: center;
	background-color: #f6f7f9;
	padding: 10rpx 20rpx 10rpx 20rpx;
	border-radius: 30rpx;
}
.date-label {
	font-size: 28rpx;
	color: #333;
	margin-right: 10rpx;
}
.date-picker {
	font-size: 26rpx;
	color: #333;
	margin-right: 10rpx;
}
.range-container {
	display: flex;
	flex-direction: row;
	align-items: center;
	background-color: #f6f7f9;
	margin-top: 30rpx;
	padding: 10rpx 20rpx 10rpx 20rpx;
	border-radius: 30rpx;
}
.picker-text {
	font-size: 26rpx;
	color: #333;
	margin-right: 10rpx;
}
.input-area {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	margin: 30rpx 40rpx 40rpx 40rpx;
	border-radius: 30rpx;
}

.input-box {
  flex: 1;
  background-color: #f6f7f9;
  border-radius: 20px;
  padding: 0 30rpx 0 30rpx;
  font-size: 28rpx;
  max-height: 100px;
  min-height: 40px;
}

.send-button {
  margin-left: 10px;
  background-color: #ed8e40;
  color: white;
  flex: 1;
  padding: 20rpx 30rpx 20rpx 30rpx;
  border-radius: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.send-button.disabled {
  background-color: #ccc;
  opacity: 0.7;
}

.send-text {
  font-size: 16px;
}
.refresh-button {
	flex: 1;
  margin-left: 10px;
  background-color: #8cc03a;
  color: white;
	padding: 20rpx 30rpx 20rpx 30rpx;
	border-radius: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tags-container {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin: 30rpx 40rpx 40rpx 40rpx;
}


</style>

<script setup>
	import { ref, onMounted, computed  } from 'vue';
	import uniDatetimePicker from '@dcloudio/uni-ui/lib/uni-datetime-picker/uni-datetime-picker.vue';

	const startDate = ref('');
	const endDate = ref('');
	const dateRange = ref('');
	const isRefreshing = ref(false);

	const change = (e) => {
		console.log(e);
	}
	const budget = ref(["穷游","性价比","舒适","豪华"]);
	const selectBudgetIdx = ref(2);
	const departureCity = ref('');
	
	onMounted(() => {
		// 获取今天的日期
		const today = new Date();
		// 获取5天后的日期
		const fiveDaysLater = new Date();
		fiveDaysLater.setDate(today.getDate() + 5);
		
		// 格式化日期为 YYYY-MM-DD
		const formatDate = (date) => {
			const year = date.getFullYear();
			const month = String(date.getMonth() + 1).padStart(2, '0');
			const day = String(date.getDate()).padStart(2, '0');
			return `${year}-${month}-${day}`;
		};
		
		// 设置日期范围
		dateRange.value = [formatDate(today), formatDate(fiveDaysLater)];
		
		// 获取当前城市
		// getCurrentCity();
		departureCity.value = '北京市';
		
		refreshPlanCards();
	})

	const cityData = ref([
		{ text: '山东', value: '山东', children: [
			{ text: '济南', value: '济南' },
			{ text: '青岛', value: '青岛' },
			{ text: '泰山', value: '泰山' },
			{ text: '曲阜', value: '曲阜' }
		] },
		{ text: '江苏', value: '江苏', children: [
			{ text: '南京', value: '南京' },
			{ text: '苏州', value: '苏州' },
			{ text: '无锡', value: '无锡' }
		] },
		{ text: '浙江', value: '浙江', children: [
			{ text: '杭州', value: '杭州' },
			{ text: '宁波', value: '宁波' },
			{ text: '绍兴', value: '绍兴' }
		] },
		{ text: '北京', value: '北京', children: [
			{ text: '北京市', value: '北京市' }
		] },
		{ text: '上海', value: '上海', children: [
			{ text: '上海市', value: '上海市' }
		] },
		{ text: '广东', value: '广东', children: [
			{ text: '广州', value: '广州' },
			{ text: '深圳', value: '深圳' },
			{ text: '珠海', value: '珠海' }
		] },
		{ text: '四川', value: '四川', children: [	
			{ text: '成都', value: '成都' },
			{ text: '峨眉山', value: '峨眉山' },
			{ text: '九寨沟', value: '九寨沟' }
		] },
		{ text: '陕西', value: '陕西', children: [
			{ text: '西安', value: '西安' },
			{ text: '华山', value: '华山' },
			{ text: '兵马俑', value: '兵马俑' }
		] },
		{ text: '湖南', value: '湖南', children: [
			{ text: '长沙', value: '长沙' },
			{ text: '张家界', value: '张家界' },
			{ text: '凤凰古城', value: '凤凰古城' }
		] },
		{ text: '湖北', value: '湖北', children: [
			{ text: '武汉', value: '武汉' },
			{ text: '宜昌', value: '宜昌' },
			{ text: '三峡大坝', value: '三峡大坝' }
		] },
		
	]);

	const handleCityChange = (e) => {
		console.log(e);
	}

	const handleTagClick = (index) => {
		selectBudgetIdx.value = index;
	}

	const handleCardClick = (card) => {
		try {
			// 先存储数据
			uni.setStorageSync('card', card);
			uni.setStorageSync('dateRange', dateRange.value);
			uni.setStorageSync('budget', budget.value);
			uni.setStorageSync('departureCity', departureCity.value);
			
			// 使用 getCurrentPages 方法进行页面跳转
			const pages = getCurrentPages();
			if (pages) {
				uni.navigateTo({
					url: '/pages/qiluyihao/detail',
					fail: (err) => {
						console.error('Navigation failed:', err);
						// 降级处理：使用 redirectTo
						uni.redirectTo({
							url: '/pages/qiluyihao/detail'
						});
					}
				});
			}
		} catch (error) {
			console.error('Error in handleCardClick:', error);
			// 显示错误提示
			uni.showToast({
				title: '页面跳转失败',
				icon: 'none'
			});
		}
	}


	const cards = ref([{
					plan_title: '🌄 齐鲁文化深度游',
					plan_description: '从济南出发，乘坐旅游专列前往泰安、莒县，深度体验齐鲁文化，感受历史底蕴',
					suitableCrowd: '适合文化爱好者，历史研究者，摄影玩家，美食达人',
					stations: [{
						station: '济南',
						time: '08:00'
					},
					{
						station: '泰安',
						time: '09:10'
					},
					{
						station: '莒县',
						time: '13:10'
					}]
				},
				{
					plan_title: '👨‍👩 大明湖畔的夏雨荷',
					plan_description: '从威海出发，乘坐旅游专列前往临沂、大明湖，深度体验亲子游玩，感受自然之美',
					suitableCrowd: '适合亲子游玩，适合家庭出游',
					stations: [{
						station: '威海',
						time: '06:30'
					},
					{
						station: '临沂',
						time: '13:50'
					},
					{
						station: '大明湖',
						time: '14:30'
					}]
				},
				{
					plan_title: '🌊 山海情深，胶东半岛',
					plan_description: '从内陆古城到滨海城市，感受山海情深，胶东半岛的独特魅力',
					suitableCrowd: '适合文化爱好者，历史研究者，摄影玩家，美食达人',
					stations: [{
						station: '莒县',
						time: '12:30'
					},
					{
						station: '曲阜',
						time: '13:10'
					},
					{
						station: '泰安',
						time: '14:30'
					},
					{
						station: '济南',
						time: '15:30'
					}]
				},
				{
					plan_title: '📸 齐鲁旅游专列环游山东',
					plan_description: '一次旅行，环游山东，感受齐鲁文化的独特魅力',
					suitableCrowd: '适合时间充裕的游客，喜欢摄影的游客',
					stations: [{
						station: '莒县',
						time: '12:30'
					},
					{
						station: '曲阜',
						time: '13:10'
					},
					{
						station: '威海',
						time: '14:30'
					}]
				}
	])

	// 生成行程卡片 - 使用API
	function refreshPlanCards() {
		if (isRefreshing.value) return; // 防止重复点击
		isRefreshing.value = true;

		// 显示更新提示
		uni.showToast({
			title: '正在生成行程...',
			icon: 'none'
		});

		// Call the API to get dynamic topic recommendations
		uni.request({
			url: 'https://tushuoit.com/api/ju/deepseek/chat',
			method: 'POST',
			data: {
			apiKey: "juxianwenlv",
			model: 'deepseek-r1-distill-qwen-32b',
			prompt: `
			# 角色
			你是一个经验丰富的旅游规划师，擅长根据游客的需求和偏好，为他们提供个性化的旅游行程建议。
			
			# 任务
			请为游客提供随机生成3个行程计划，每个行程包含主题、亮点、适合人群、站点，小红书风格，返回JSON格式。
			## 用户需求
			- 出发地：${departureCity.value}
			- 计划日期：${dateRange.value}
			- 预算：${budget.value}
			## 返回JSON包含：
			- plan_title（前面添加一个贴合主题的emoji,不超过20字），
			- plan_description（行程计划和亮点的简要描述），
			- suitableCrowd（适合人群特点，例如：文化爱好者，历史研究者，摄影玩家，美食达人）
			- 需要返回站点的经纬度
			- 行程计划中包含的站点（站点只能在旅游专列的线路中选择，几个站点之间必须是可以通过旅游专列前往的，需要考虑站点时间，乘坐列车的等待时间，站点地的游览时间的可行性）。不要有任何前导说明或多余注释。
			## 旅游专列站点信息
			#### 1. 济南—枣庄西线（6站）

| 站点     | 发车时间 | 备注                     |
|----------|----------|--------------------------|
| 济南     | 08:00    | 始发站                   |
| 泰山     | 09:10    | 停靠20分钟（游览衔接）   |
| 磁窑     | 10:00    | 停靠15分钟               |
| 兖州     | 11:00    | 停靠30分钟（换乘衔接）   |
| 邹城     | 11:50    | 停靠20分钟               |
| 枣庄西   | 13:10    | 终点站（含午餐时间安排） |

---

#### 2. 枣庄西—威海线（11站）

| 站点     | 发车时间 | 备注                     |
|----------|----------|--------------------------|
| 枣庄西   | 07:30    | 始发站                   |
| 滕州     | 08:10    | 停靠10分钟               |
| 邹城     | 08:40    | 停靠15分钟               |
| 兖州     | 09:20    | 停靠20分钟               |
| 泰山     | 10:30    | 停靠30分钟（游览衔接）   |
| 济南     | 12:00    | 停靠60分钟（午餐）       |
| 淄博     | 13:50    | 停靠20分钟               |
| 潍坊     | 15:10    | 停靠30分钟（换乘衔接）   |
| 蓝村     | 16:20    | 停靠10分钟               |
| 莱阳     | 17:30    | 停靠15分钟               |
| 威海     | 19:00    | 终点站（含晚餐安排）     |

---

#### 3. 陵城—济南线（9站）

| 站点     | 发车时间 | 备注                     |
|----------|----------|--------------------------|
| 陵城     | 07:00    | 始发站                   |
| 临邑     | 07:40    | 停靠10分钟               |
| 阳信     | 08:30    | 停靠15分钟               |
| 利津南   | 09:20    | 停靠10分钟               |
| 东营     | 10:00    | 停靠30分钟（游览衔接）   |
| 淄博     | 11:30    | 停靠20分钟               |
| 大明湖   | 13:00    | 停靠60分钟（午餐+游览）  |
| 济南     | 14:30    | 终点站                   |

---

#### 4. 威海—陵城线（28站）

| 站点     | 发车时间 | 备注                         |
|----------|----------|------------------------------|
| 威海     | 06:30    | 始发站                       |
| 文登     | 07:10    | 停靠5分钟                    |
| 乳山     | 07:50    | 停靠10分钟                   |
| 莱阳     | 08:40    | 停靠15分钟                   |
| 即墨北   | 09:50    | 停靠10分钟                   |
| 胶州     | 10:20    | 停靠10分钟                   |
| 诸城     | 11:10    | 停靠15分钟（换乘衔接）       |
| 五莲     | 11:50    | 停靠10分钟                   |
| 莒县     | 12:30    | 停靠15分钟（午餐准备）       |
| 沂南     | 13:10    | 停靠10分钟                   |
| 临沂     | 13:50    | 停靠60分钟（午餐+游览）      |
| 费县     | 15:10    | 停靠10分钟                   |
| 平邑     | 15:50    | 停靠15分钟                   |
| 曲阜     | 16:40    | 停靠40分钟（三孔景区）       |
| 兖州     | 17:40    | 停靠20分钟                   |
| 济宁     | 18:20    | 停靠15分钟                   |
| 巨野     | 19:10    | 停靠10分钟                   |
| 菏泽     | 19:50    | 停靠20分钟                   |
| 聊城     | 21:20    | 停靠30分钟（晚餐）           |
| 齐河     | 23:00    | 停靠10分钟                   |
| 大明湖   | 23:40    | 停靠15分钟（夜间换乘）       |
| 淄博     | 次日00:50| 停靠10分钟                   |
| 东营     | 02:10    | 停靠15分钟                   |
| 利津南   | 03:00    | 停靠5分钟                    |
| 阳信     | 03:40    | 停靠10分钟                   |
| 商河     | 04:20    | 停靠5分钟                    |
| 临邑     | 05:00    | 停靠10分钟                   |
| 陵城     | 06:00    | 终点站（全程约23.5小时）     |

---

					# 输出示例
				[{
					plan_title: '🌄 xxxx',
					plan_description: 'xxxx',
					suitableCrowd: '适合xxx',
					stations: [
					{
						station: '济南',
						time: '08:00'
					},
					{
						station: '泰安',
						time: '09:10'
					},
					{
						station: '莒县',
						time: '13:10'
					}]
				},
				...
				]

					`
			},
			success: (res) => {
			console.log('API response:', res.data);
			try {
				// Parse the response based on the specific Deepseek API structure
				if (res.data && res.data.choices && res.data.choices.length > 0) {
				const content = res.data.choices[0].message.content;

				// Extract JSON from the content (may contain markdown code blocks)
				const jsonMatch = content.match(/```json\s*([\s\S]*?)\s*```/) ||
					content.match(/\[\s*\{[\s\S]*\}\s*\]/);

				if (jsonMatch) {
					// Use the extracted JSON string
					const jsonStr = jsonMatch[1] || jsonMatch[0];
					const parsedData = JSON.parse(jsonStr);

					if (Array.isArray(parsedData)) {
						cards.value = parsedData;
					console.log('Successfully parsed topics:', parsedData);
					}
				} else {
					throw new Error('Could not extract JSON from API response');
				}
				} else {
				throw new Error('Unexpected API response format');
				}
			} catch (error) {
				console.error('Failed to parse API response:', error);
				// Fallback to local data
				
			}

			// Complete the refresh process
			isRefreshing.value = false;
			
			// uni.showToast({
			// 	title: 'AI已为您生成行程卡片',
			// 	icon: 'none',
			// 	duration: 1500
			// });
			},
			fail: (err) => {
			console.error('API request failed:', err);
			// Fallback to local data on API failure
			

			// Complete the refresh process
			isRefreshing.value = false;

			// uni.showToast({
			// 	title: 'AI已为您生成行程卡片',
			// 	icon: 'none',
			// 	duration: 1500
			// });
			}
		});
	}

</script>
